﻿<!DOCTYPE html>
<html>
<head>
    <title>Lava:  Attribute - class</title>
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <link href='../css/demos.css' rel='stylesheet' type='text/css'>
    <link href="../css/prettify.css" rel="stylesheet" />
    <style type="text/css">
        #demo {
            width:300px;margin:50px auto;height:100px;border:3px dashed #777;border-radius:8px;
            line-height:100px;text-align:center;color:#555;font-size:1.2em
        }
        .hover { background-color:rgba(12, 136, 242, 0.56) }
        .click { background-color:rgba(204, 4, 4, 0.56) }
    </style>
</head>
<body>
    <div class="content">
        <h1>Class Attribute Demo</h1>
        This demo features the <span class="property">class</span> binding property.  This property is responsible for 
        binding a value to the className property of a DOM element.  It is interchangeable with the property 
        <span class="property">className</span>.  The <span class="property">class</span> property is a shortcut.  As seen
        in the demo, you can use this property to bind the class of an element to a value on a Lava Object.  Note that 
        this binding property overwrites any existing class on the element.
    </div>
    <div id="demo" data-bind="{class: model.className, mouseover: model.hover, mouseout: model.normal, click: model.click, text: model.label}"></div>
    <!--code-->
    <pre class="prettyprint">
&lt;script type="text/javascript"&gt;
    var model = Lava.Object({
        className: '',
        label: 'Hover over me!',
        hover: function () {
            model.className = 'hover';
            model.label = 'Click me!';
        },
        normal: function () {
            model.className = '';
            model.label = 'Hover over me!';
        },
        click: function () {
            model.className = 'click';
            model.label = 'Cool!';
        }
    });
&lt;/script&gt;

&lt;div data-bind="{class: model.className, mouseover: model.hover, mouseout: model.normal, click: model.click, text: model.label}"&gt;&lt;/div&gt;
    </pre>
    <div class="clear-10"></div>

    <script src="../scripts/prettify.js"></script>
    <script src="../scripts/lava.js" type="text/javascript"></script>
    <script type="text/javascript">
        var model = Lava.Object({
            className: '',
            label: 'Hover over me!',
            hover: function () {
                model.className = 'hover';
                model.label = 'Click me!';
            },
            normal: function () {
                model.className = '';
                model.label = 'Hover over me!';
            },
            click: function () {
                model.className = 'click';
                model.label = 'Cool!';
            }
        });
    </script>
    <script type="text/javascript">prettyPrint();</script>
</body>
</html>
